<template>
    <el-container>
      <!-- 头部区域 -->
      <el-header height="60px">
        <h3>碳排放报告审批与上链管理</h3>
      </el-header>
  
      <!-- 内容区域 -->
      <el-main>
        <el-dialog title="审批报告" :visible.sync="approveDialogVisible" width="50%">
    <el-form ref="approveForm" :model="currentApproveItem" label-width="80px">
      <el-form-item label="审核结论">
        <el-select v-model="currentApproveItem.auditConclusion" placeholder="请选择审核结论">
          <el-option label="审核通过" value="审核通过"></el-option>
          <el-option label="审核未通过" value="审核未通过"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核理由" v-if="currentApproveItem.auditConclusion ==='审核未通过'">
        <el-input type="textarea" v-model="currentApproveItem.auditReason" autosize></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="approveDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitApprove">确定</el-button>
    </div>
  </el-dialog>
        <!-- 报告列表 -->
        <el-table :data="emissionData" style="width: 100%">
          <el-table-column prop="enterpriseName" label="企业名称"></el-table-column>
          <el-table-column prop="emissionDate" label="报告日期"></el-table-column>
          <el-table-column prop="carbonEmission" label="碳排放量"></el-table-column>
          <el-table-column prop="auditStatus" label="审核状态">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.auditStatus)">{{ scope.row.auditStatus }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus === '待审核'" type="primary" @click="handleApprove(scope.$index)">审批</el-button>
              <el-button v-if="['审核通过', '审核未通过'].includes(scope.row.auditStatus)" type="success" @click="handleChain(scope.$index)">上链</el-button>
              <el-button v-if="scope.row.auditStatus ==='已上链'" type="danger" >无法操作(已上链)</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 审批和上链结果提示信息 -->
        <div v-if="approveResult || chainResult" class="result-message">
          <p v-if="approveResult">{{ approveResult.message }}</p>
          <p v-if="chainResult">{{ chainResult.message }}</p>
        </div>
        <el-table v-if="hasChainedReports" :data="chainedData" style="width: 100%; margin-top: 20px;" border>
  <el-table-column prop="enterpriseName" label="企业名称"></el-table-column>
  <el-table-column prop="emissionDate" label="报告日期">
      <template slot-scope="{ row }">
        <span>{{ formatDate(row.emissionDate) }}</span>
      </template>
    </el-table-column>

    <!-- 碳排放量列 -->
    <el-table-column prop="carbonEmission" label="碳排放量">
      <template slot-scope="{ row }">
        <span>{{ formatCarbonEmission(row.carbonEmission) }}</span>
      </template>
    </el-table-column>
  <el-table-column prop="auditConclusion" label="审核结论"></el-table-column>
</el-table>
      </el-main>
  
      <!-- 底部区域（可选） -->
      <el-footer height="50px">

      </el-footer>
    </el-container>
  </template>
  
  <script>
  export default {
    computed: {
    hasChainedReports() {
      return this.emissionData.some(item => item.auditStatus === '已上链');
    },
    chainedData() {
      return this.emissionData.filter(item => item.auditStatus === '已上链');
    },
  },
    data() {
      return {
        approveDialogVisible: false,
        currentApproveItem: {
            auditConclusion:'',
            auditReason:''
        },
        emissionData: [
          { enterpriseName: '企业A', emissionDate: '2023-01-01', carbonEmission: '1000吨', auditStatus: '待审核' },
          { enterpriseName: '企业B', emissionDate: '2023-02-01', carbonEmission: '800吨', auditStatus: '审核通过' },
          { enterpriseName: '企业C', emissionDate: '2023-03-01', carbonEmission: '1200吨', auditStatus: '待审核' },
          { enterpriseName: '企业D', emissionDate: '2023-06-01', carbonEmission: '1500吨', auditStatus: '已上链' },
          { enterpriseName: '企业F', emissionDate: '2023-08-01', carbonEmission: '1250吨', auditStatus: '审核未通过' },
        ],
        approveResult: null,
        chainResult: null,
      };
    },
    methods: {
        formatDate(dateStr) {
      // 这里假设 dateStr 是 ISO 格式的日期字符串
      return new Date(dateStr).toLocaleDateString();
    },

    // 格式化碳排放量（例如添加单位或千/万转换）
    formatCarbonEmission(carbonEmission) {
      return `${carbonEmission} `;
    },
      getStatusType(status) {
        // 根据审核状态返回标签颜色
        if (status === '待审核') return 'warning';
        if (status === '审核通过') return 'success';
        if (status === '已上链') return 'primary';
        return 'danger'; // 对于'审核未通过'
      },
      handleApprove(index) {
        this.approveDialogVisible = true;
  this.currentApproveItem = Object.assign({}, this.emissionData[index]);
  // 记录当前操作的索引
  this.currentApproveIndex = index;
    },

    submitApprove() {
      if (this.$refs.approveForm.validate()) {
        const conclusion = this.currentApproveItem.auditConclusion;
        if (conclusion === '审核通过') {
          this.handleApproveYes(this.currentApproveIndex);
        } else if (conclusion === '审核未通过') {
          this.handleApproveNo(this.currentApproveIndex, this.currentApproveItem.auditReason);
        }
        this.approveDialogVisible = false;
      }
    },

    handleApproveYes(index) {
      // 模拟审批通过逻辑
      this.emissionData[index].auditStatus = '审核通过';
      this.approveResult = { message: '报告已成功审批！' };
      setTimeout(() => {
        this.approveResult = null;
      }, 3000); // 显示消息3秒后自动清除
    },

    handleApproveNo(index, reason) {
      // 模拟审批未通过逻辑
      this.emissionData[index].auditStatus = '审核未通过';
      this.approveResult = { message: '报告未通过审核！理由：' + reason };
      setTimeout(() => {
        this.approveResult = null;
      }, 3000); // 显示消息3秒后自动清除
    },

      handleChain(index) {
        // 模拟上链逻辑
        if (this.emissionData[index].auditStatus !== '审核通过') {
            this.chainResult = { message: '报告异常无法上链！' };
            setTimeout(() => {
          this.chainResult = null;
        }, 3000); // 显示消息3秒后自动清除
            return;
        }
        this.emissionData[index].auditStatus = '已上链';
        this.emissionData[index].isOnChain = true; // 假设增加一个是否上链的标志属性
        this.chainResult = { message: '报告已成功上链！' };
        setTimeout(() => {
          this.chainResult = null;
        }, 3000); // 显示消息3秒后自动清除
      },
    },
  };
  </script>
  
  <style scoped>
  .result-message {
    margin-top: 20px;
    color: #409EFF;
  }
  </style>